<!DOCTYPE html>
<style>
#target {
  width: 50px;
  height: 50px;
  background-color: blue;
}
</style>
<title>Main</title>
<div id=target></div>
<script src="../../../resources/js-test.js"></script>
<script>
description('Tests a node moving documents while being touched.');

function logEvent(e) {
  e.preventDefault();
  var name = e.currentTarget.nodeName;
  if (e.currentTarget.title)
    name += '-' + e.currentTarget.title;
  else if(e.currentTarget.id)
    name += '-' + e.currentTarget.id;
  debug('Received ' + e.type + ' on ' + name);
}

var dummyDoc = document.implementation.createHTMLDocument('dummyDoc');

var target = document.getElementById('target');
target.addEventListener('touchstart', function(e) {
});

var targets = [target, document, dummyDoc];
var events = ['touchstart', 'touchmove', 'touchend'];
for (var i = 0; i < events.length; i++) {
  for (var j = 0; j < targets.length; j++) {
    targets[j].addEventListener(events[i], logEvent, {passive: false});
  }
}

if (window.eventSender) {
  debug('Sending touchstart');
  var rect = target.getBoundingClientRect();
  var targetX = rect.left + rect.width / 2;
  var targetY = rect.top + rect.height / 2;
  eventSender.addTouchPoint(targetX, targetY);
  eventSender.touchStart();
  debug('');

  debug('Moving target node to new document');
  dummyDoc.body.appendChild(target);
  debug('');

  debug('Sending touchmove');
  eventSender.updateTouchPoint(0, targetX + 1, targetY + 1);
  eventSender.touchMove();
  debug('');

  debug('Re-adding target node to main document');
  document.body.insertBefore(target, document.body.firstChild);
  debug('');

  debug('Sending touchend');
  eventSender.releaseTouchPoint(0);
  eventSender.touchEnd();
  debug('');
}
</script>

